//  Copyright (c) 2018-present, Cruise LLC
//
//  This source code is licensed under the Apache License, Version 2.0,
//  found in the LICENSE file in the root directory of this source tree.
//  You may not use this file except in compliance with the License.
@import "~webviz-core/src/styles/colors.module.scss";

.icon > svg {
  fill: currentColor;
  width: 1em;
  height: 1em;
  vertical-align: text-top;
}
.xlarge,
.xlarge img {
  width: 32px;
  height: 32px;
  font-size: 32px;
  vertical-align: middle;
}

.large,
.large img {
  width: 24px;
  height: 24px;
  font-size: 24px;
  vertical-align: middle;
}

.medium,
.medium img {
  width: 20px;
  height: 20px;
  font-size: 20px;
  vertical-align: middle;
}

.small,
.small img {
  width: 18px;
  height: 18px;
  font-size: 18px;
  vertical-align: middle;
}

.xsmall,
.xsmall img {
  width: 16px;
  height: 16px;
  font-size: 16px;
  vertical-align: middle;
}

.xxsmall,
.xxsmall img {
  width: 11px;
  height: 11px;
  font-size: 11px;
  vertical-align: middle;
}

.clickable {
  cursor: pointer;
}
:global(.disabled) .clickable,
[disabled] .clickable {
  cursor: unset;
}

.fade {
  opacity: 0.6;
  transition: opacity 0.2s ease-in-out;

  &:hover {
    opacity: 0.8;
  }

  &.active {
    opacity: 1;
  }
}

.wrappedIcon {
  &:hover {
    background-color: $dark3;
  }

  &.active {
    background-color: $dark4;
  }
}
